<template>
  <div class="ax_sticky_top">
    <a-card title="登录日志">
      <a-flex wrap="wrap">
        <a-flex :gap="4" wrap="wrap">
          <a-input
            placeholder="请输入IP"
            allow-clear
            style="width: 200px"
            v-model:value="loginLogQuery.ipaddr"
          ></a-input>
          <a-input
            placeholder="请输入用户名"
            allow-clear
            style="width: 200px"
            v-model:value="loginLogQuery.userName"
          ></a-input>
          <div>
            <a-range-picker
              style="width: 200px"
              v-model:value="range"
              @change="onChange"
              :format="dateFormat"
            />
          </div>
          <a-button @click="loadLoginList">刷新</a-button>
          <a-button type="primary" @click="loadLoginList">搜索</a-button>
        </a-flex>
      </a-flex>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { useDateFormat } from '@vueuse/core';
import type { Dayjs } from 'dayjs';
import { loadLoginList, loginLogQuery } from '../card/data';

const range = ref<[Dayjs, Dayjs]>();
const dateFormat = 'YYYY/MM/DD';

const onChange = (data: any) => {
  if (!data) {
    loginLogQuery.value.params = {
      beginTime: '',
      endTime: '',
    };
    return;
  }
  if (!range.value || !loginLogQuery.value.params) return;
  const [start, end] = range.value;
  const startTime = useDateFormat(start.toDate(), 'YYYY-MM-DD').value;
  const endTime = useDateFormat(end.toDate(), 'YYYY-MM-DD').value;
  loginLogQuery.value.params.beginTime = startTime;
  loginLogQuery.value.params.endTime = endTime;
  loadLoginList();
};
</script>

<style lang="scss" scoped></style>
